<template>
  <div class="header style2-top"
    :class="[ headerData.show_fx_upgrade ? 'style2-top2': '' ]"
    :style="{ backgroundImage:'url('+headerData.bgImg+')'}">
    <div class="infoPanel">
      <div class="avatar-box fl">
        <div class="avatar j-render" :style="{ backgroundImage:'url('+headerData.userImg+')'}"></div>
        <div class="outer"></div>
      </div>
      <!-- chaining_rank: 链动等级 -->
      <div class="userinfo fl">
        <p class="nickname clearfix">
          <span class="nickname-title fl" :class="dhsSalesawardRule && dhsSalesawardRule.is_top== 1 ?'nickname_star':''" v-if="headerData.nickname">{{ headerData.nickname }}</span>
          <span class="nickname-title fl fontAliBaba" v-else>{{ headerData.mobile }}</span>
          <span
            class="lit-spn bor fl"
            v-if="(headerData.show_level && headerData.rank_name) || headerData.chaining_rank"
          >{{ headerData.rank_name || headerData.chaining_rank }}</span>
        </p>
        <!-- 代理商 -->
        <p v-if="headerData.dls_mode == 1 || headerData.dls_mode == 2">
          <span class="lit_spn"><span v-if="headerData.ftitle_agency_area">{{headerData.ftitle_agency_area}}：</span>{{headerData.dls_area}}</span>
        </p>
        <!-- 订货商 -->
        <p v-if="dhsSalesawardRule"
            :class="dhsSalesawardRule.is_top == 1 ?'nickname_star':''"><!-- 星星循环展示星级 ，没有星级则不加载 -->
            <span class="bor">推荐星级：</span>
            <img v-for="(item,index) in dhsSalesawardRule.stars_item" :key="index" :src="star" style="margin-left: 0;" alt="">
        </p>
        <p v-if="headerData.end_time">
          <span class="lit-spn">
            到期时间:
            <i class="fontAliBaba">{{ headerData.end_time }}</i>
          </span>
        </p>

      </div>
      <div class="gotoMail"
            @click="Jump('letter')">
        <span class="num fontAliBaba">{{ getLetterCount(headerData.letterCount) }}</span>
      </div>
      <!-- TODO 小程序订货中心 代理中心 供应商中心不显示二维码 -->
      <template>
        <span class="myif-er j-showQrcode" v-if="headerData.show_qrcode" @click="show_qrcode()"></span>
      </template>
    </div>
    <!-- 会员卡特权 -->
    <div class="membership-card" v-if="headerData.show_fx_upgrade">
      <div class="card-text">{{headerData.ftitle_level ? headerData.ftitle_level : '分销等级' }}：{{headerData.rank_name?headerData.rank_name:'无等级'}}</div>
      <div class="card-btn" @click="Jump('upGrade')" v-show="headerData.is_show_upgrade_button!=0">我要升级</div>
    </div>
    <div class="cover"></div>
  </div>
</template>

<script>
import Vue from 'vue'

export default Vue.extend({
  props: {
    headerData: {},
    dhsSalesawardRule: {}
  },
  data() {
    return {
      bg_img: 'https://img.wifenxiao.com/h5-wfx/images/user/member/user_style3_bg_black.png',
      star: 'https://img.wifenxiao.com/h5-wfx/images/user/star.png'
    }
  },
  methods: {
    Jump(url, data) {
      // console.log(url, 'asdasdasdsa')
      this.$JumpPath(this, url, data)
    },
    getLetterCount(num) {
      const mailNum = parseInt(num)
      return mailNum > 99 ? '99+' : num <= 0 ? '' : num
    },
    show_qrcode() {
      this.$emit('show')
    }
  }
})
</script>

<style lang="scss">
@import 'src/styles/user/index.scss';
.header.style2-top{
  position: relative;
  min-height: 270px;
  &.style2-top2{
    padding-bottom: 140px !important;
  }
  .infoPanel .userinfo{
    height: 171px;
    display: flex;
    flex-direction:column;
    justify-content: center;
    p{
      width: 100%;
      margin-top: 15px;
      line-height: 40px;
      img{
        vertical-align: -5px;
        height: 30px;
      }
      .nickname-title{
        // width: 400px;
        font-size: 36px;
        font-weight: bold;
        @include showEllipsis;
        &.nickname_star{
          color: #ffdb70;
          font-weight: bold;
        }
      }
      &.nickname_star{
        color: #ffdb70;
        font-weight: bold;
      }
      .bor{
        color:#fff;
        background:rgba(0,0,0,.15);
        // margin-left: 20px;
      }
      &:first-child{
        margin-top: 0;
      }
    }
  }
  .cover{
    position: absolute;
    z-index: 9;
    bottom: -2px;
    width: 750px;
    height: 18px;
    background: url("https://img.wifenxiao.com/h5-wfx/images/user/member/user_bg_bottom_cover.png") center/100% 100% no-repeat;
  }
}
</style>
